<script setup lang="ts">
import { inject } from 'vue';

import ProductItem from './product-item.vue';

const { products, loading } = inject('products') as any;
</script>

<template>
  <div class="mb-10 pb-20 pl-4 pr-4">
    <a-spin :spinning="loading">
      <a-space :size="[18, 20]" class="w-full" wrap>
        <template v-for="i in products" :key="i.itemId">
          <ProductItem :item="i" />
        </template>
      </a-space>
    </a-spin>

    <div
      v-if="products.length === 0"
      class="mt-24 flex h-96 w-full items-center justify-center"
    >
      <a-empty :description="loading ? '正在查找数据' : '没有查找到数据'" />
    </div>
  </div>
</template>
